import { useState, useCallback } from 'react';
import { Stack, Box, InputGroup, InputLeftElement, Input, Button, Flex, Checkbox, Text, Divider, useToast } from '@chakra-ui/react';
import { BsPersonFill, BsLockFill } from 'react-icons/bs';
import FormFooter from './FormFooter';
import request from '../request';

const focus = { outline: 'none' };
const iconStyle = {
  fontSize: '18px',
  color: '#969696'
};
const aHover = { color: '#333' };

export default function SignIn() {
  const toast = useToast();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleClick = useCallback(() => {
    const load = async () => {
      try {
        await request({
          url: 'https://conduit.productionready.io/api/users/login',
          method: 'POST',
          data: {
            user: {
              email,
              password
            },
          }
        });
        toast({
          title: "登录成功",
          status: "success",
          duration: 3000,
          isClosable: true,
        });
        setEmail('');
        setPassword('');
      } catch (res) {
        const { errors } = res.response.data;
        for (let key in errors) {
          const messages = errors[key];
          for (let i = 0, len = messages.length; i < len; i++) {
            toast({
              title: "请求失败",
              description: `${key} ${messages[i]}`,
              status: "error",
              duration: 3000,
              isClosable: true,
            });
          }
        }
      }
    };
    load();
  }, [email, password, toast]);
  return (
    <Box>
      <Stack fontSize="14px" spacing="15px">
        <Stack
          spacing="0"
          borderRadius="3px"
          border="1px solid #c8c8c8"
          bgColor="rgba(181, 181, 181, 0.1)"
        >
          <InputGroup>
            <InputLeftElement h="50px" children={<BsPersonFill style={iconStyle} />} />
            <Input
              placeholder="手机号或邮箱"
              h="50px"
              py="4px"
              border="none"
              _focus={focus}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </InputGroup>
          <Divider orientation="horizontal" color="#c8c8c8" />
          <InputGroup>
            <InputLeftElement h="50px" children={<BsLockFill style={iconStyle} />} />
            <Input
              type="password"
              placeholder="密码"
              h="50px"
              py="4px"
              border="none"
              _focus={focus}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </InputGroup>
        </Stack>
        <Flex justify="space-between" align="center">
          <Checkbox defaultChecked _focus={focus}>
            <Text as="span" color="#999" fontSize="14px">记住我</Text>
          </Checkbox>
          <Text as="a" href="#" color="#999" _hover={aHover}>登录遇到问题？</Text>
        </Flex>
        <Button
          w="100%"
          fontSize="18px"
          fontWeight="400px"
          borderRadius="20px"
          bgColor="#3194d0"
          color="#FFF"
          _focus={focus}
          _hover={{ backgroundColor: '#187cb7' }}
          isDisabled={!email || !password}
          onClick={handleClick}
        >登录</Button>
      </Stack>
      <FormFooter login={true} />
    </Box>
  );
}